<template>
	<view>
		<!-- 自定义导航栏 -->
		<view>
			<u-navbar :is-back="false" title="" :background="{backgroundColor:'#f0f0f0'}" :border-bottom="!checkBoxFlag">
				<view class="custom-navbar" v-if="checkBoxFlag==false">
					<view class="nav-left" @click="customBack">
						<u-icon name="arrow-left" color="#000000" size="34"></u-icon>
					</view>
					<view class="nav-center u-flex u-row-center u-col-center">
						<view>{{yyyGroup.nickName}}</view>
					</view>
					<view class="nav-right" @click="toGroupDetail()">
						<u-icon name="more-dot-fill" color="#000000" :size="35"></u-icon>
					</view>
				</view>
				<view class="custom-navbar" v-else>
					<view class="nav-left" 
						 style="font-size: 32rpx;color: #000000;"
						 @click="checkBoxFlag=false">
						<text>取消</text>
					</view>
					<view class="nav-center u-flex u-row-center u-col-center">
						<view>{{yyyGroup.nickName}}</view>
					</view>
					<view class="nav-right">
						<text> </text>
					</view>
				</view>
			</u-navbar>
			<view style="background-color: #f0f0f0;border-bottom: 1rpx solid #c0c0c0;" 
					class="u-p-20" v-if="checkBoxFlag">
				<view class="u-flex u-row-center u-col-center"
						style="background-color: #ffffff;height:70rpx;border-radius: 10rpx;color: #c0c0c0;">
					<view class="u-m-r-20">
						<u-icon class="u-clear-icon" top="6rpx"  :size="40" name="search" color="#c0c0c0"></u-icon>
					</view>
					<view style="color: #c0c0c0;font-size: 34rpx;">搜索</view>
				</view>
			</view>
		</view>
		
		<!-- 信息记录列表 test-border-->
		<view class="msg-container">
			<scroll-view :scroll-y="true" class="msg-box-scroller  hidden-scroll-bar"
				:style="checkBoxFlag?'height:'+(scrollViewHeight-80)+'px':'height:'+(scrollViewHeight-30)+'px'" :scroll-with-animation="scrollAnimation"
				:scroll-into-view="scrollIntoView"
				:upper-threshold="10" @touchstart="hideDrawer">
				<view style="width: 100%;" v-for="(msg,index) in messageList"  :key="index">
					<yyy-message-item @handleMessage="handleMessageMenu"
									@checkChange="checkChange"
									@toYYYPerson="toYYYPerson"
									:checkBoxFlag="checkBoxFlag" :item="msg"  :id="'msg_'+msg.id"></yyy-message-item>
				</view>
			</scroll-view>
		</view>
		
		<!-- 底部模块盒子 -->
		<view class="footer-container">
			<view   v-if="checkBoxFlag==true" 
						style="background-color: #F7F7F7;"
						class="u-flex u-row-around u-col-center u-p-30 u-border-top">
				<view @click="showZhuanFaPop()">
					<u-image src="/static/image/wx/handle-msg/check-zhuanfa.jpg" :width="40" :height="40">
					</u-image>
				</view>
				<view>
					<u-image src="/static/image/wx/handle-msg/check-shoucang.jpg" :width="40" :height="40">
					</u-image>
				</view>
				<view>
					<u-image src="/static/image/wx/handle-msg/check-shanchu.jpg" :width="40" :height="40">
					</u-image>
				</view>
				<view>
					<u-icon name="more-dot-fill" :size="40"></u-icon>
				</view>
				<u-action-sheet :list="zhuanFaActionList" v-model="zhuanFaPopFlag"
					@click="confirmToZhuanFa"
					safe-area-inset-bottom></u-action-sheet>
			</view>
			<view v-else class="input-box u-border-top">
				<view class="input-box-flex">
					<!-- 语音/键盘切换,H5不支持 -->
					<!-- #ifdef APP-PLUS -->
					<view>
						<image   class="icon_img"
							:src="require('@/static/image/chat/voice/voice.png')">
						</image>
					</view>
					<!-- #endif -->
					<!-- 中间的输入框或者语音录入显示框 -->
					<view class="input-box-flex-grow">
						<view  class="textArea-box">
							<scroll-view :scroll-y="true" :scroll-x="false" class="inputScroll" :show-scrollbar="true">
								<textarea style="text-indent:5upx;" auto-height="true"
									placeholder-style="color:#DDDDDD;" :cursor-spacing="10" :confirm-hold="true"
									confirm-type="send" :show-confirm-bar="false" :focus="inputFocusFlag"
									:auto-focus="false" :hold-keyboard="true" @blur="onBlur" @focus="onInputFocus"
									@confirm="$noClicks(confirmSendText)" v-model="sendStr" :cursor="sendStr.length"
									:maxlength="-1">
								</textarea>
							</scroll-view>
						</view>
					</view>
					<!-- 功能性按钮 表情-->
					<view>
						<image class="u-m-l-20" :src="require('@/static/image/chat/emoji.png')" @click="changeEmojiBox">
						</image>
					</view>
					<!-- 宫格 -->
					<view>
						<image class="u-m-l-20" :src="require('@/static/image/chat/add.png')" @click="changeDrawer">
						</image>
					</view>
					<!-- 发送按钮  @touchend.prevent="$noClicks(sendText)" -->
					<!-- <view class="u-m-l-16" @touchend.prevent="$noClicks(sendText)">
						<u-button type="success" :custom-style="customSendBtnStyle">
							<text>发送</text>
						</u-button>
					</view> -->
				</view>
				<view class="fun-box u-border-top" :class="{'show-fun-box':showFunBtn}">
					<u-grid :col="4" :border="false" @click="funGirdItemClick">
						<u-grid-item v-for="(item, index) in funList" :index="index" :key="index"
							:custom-style="{padding:'20rpx 0'}" bg-color="#F8F8F8">
							<view class="u-flex u-row-center u-col-center"
								style="background-color: #FFFFFF;width: 110rpx;height: 110rpx;border-radius: 30rpx;">
								<u-icon :name="item.icon" :size="60"></u-icon>
							</view>
							<view class="grid-text" style="font-size: 24rpx;">{{ item.title }}</view>
						</u-grid-item>
					</u-grid>
				</view>
				<view class="fun-box u-border-top" :class="{'show-fun-box':showEmojiBox}">
					<swiper class="emoji-swiper" :indicator-dots="false" :duration="50" :vertical="true">
						<swiper-item v-for="(item,index) in faceList" :key="index">
							<view v-for="(childrenItem, childrenIndex) in item" :key="childrenIndex">
								<image v-if="index<6" class="emo-image" :src="emojiUrl + emojiMap[childrenItem]">
								</image>
								<image v-else class="face-img" :src="faceUrl + childrenItem + '@2x.png'">
								</image>
							</view>
						</swiper-item>
					</swiper>
					<view v-if="showEmojiBox" style="padding:0rpx 20rpx;position: absolute;bottom: 1rpx;right: 10rpx;
								width: 250rpx;height: 150rpx;z-index: 1000;opacity: 0.9;" class="u-flex u-row-right u-col-center">
						<view class="u-flex u-row-center u-col-center"
							style="border: 1px solid #f1f1f1;border-radius: 10rpx; background-color: #82848a;width: 100rpx;padding: 15rpx 20rpx;margin-right: 8rpx;">
							<view @click="delSendStr()" @longpress="clearSendStr()">
								<u-icon name="backspace" size="46" color="#ffffff"></u-icon>
							</view>
						</view>
						<!-- <view>
							<u-button @click="$noClicks(sendText)" type="success" :custom-style="{padding:'20rpx'}">发送
							</u-button>
						</view> -->
					</view>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	import faceUtil from "@/util/emojiMap.js"; //表情
	import permission from '@/common/mobilePermission/permission.js'; //手机权限
	import yyyMessageItem from "@/components/message-item/yaoyiyao-message-item.vue"; //聊天信息
	export default {
		components: {
			yyyMessageItem
		},
		data() {
			return {
				checkBoxFlag:false,
				checkedMessages:[],
				zhuanFaPopFlag:false,
				zhuanFaActionList:[
					{
						text: '逐条转发',
						color:'#000000',
						fontSize: 34,
					},
					{
						text: '合并转发',
						color:'#000000',
						fontSize: 34,
					}
				],
				noClick: true, //防止重复点击
				yyyGroup:{
					id:'000000',
					avatar:'/static/image/default/default-user/1.jpg',
					chatNumber:'000000',
					nickName:'文件传输助手',
					signature:'每个人的活法都不一样，只要你开心，一切都值得',
					userRemark:'来吧,摇一摇',
					address:'湖北 武汉',
					sex:0,
					friendPower:0,
					forbidSelf:false,
					forbidHis:false,
					createTime:'21:20',
					sendTimeStr:"21:22",
					lastMsgContent:'',
					delFlag:false,
				},
				messageList:[],
				scrollViewHeight:0,
				scrollAnimation:false,
				scrollIntoView:'',
				chatType: 'voice', // 图标类型 'voice'语音 'keyboard'键盘
				sendStr:'',
				showFunBtn:false,
				showEmojiBox:false,
				inputFocusFlag:false,
				emojiUrl: faceUtil.emojiUrl, //表情请求前缀（腾讯）
				emojiMap: faceUtil.emojiMap, //表情包集合（腾讯）
				emojiName: faceUtil.emojiName, //表情名称（腾讯）
				faceUrl: faceUtil.faceUrl, //特殊表情请求前缀（腾讯）
				bigEmojiList: faceUtil.bigEmojiList, //特殊表情对象集合（腾讯）
				faceList: [], //自定义表情对象集合，有腾讯数据提供转换而来
				//功能菜单
				funList: [{
						id: 1,
						icon: "photo-fill",
						title: "照片",
						uploadType: ["album"]
					},
					{
						id: 2,
						icon: "camera-fill",
						title: "视频",
						uploadType: ["camera"]
					},
					{
						id: 3,
						icon: "red-packet-fill",
						title: "红包",
					},
					{
						id: 4,
						icon: "rmb-circle-fill",
						title: "转账",
					},
				],
				toolTipFlag: false,
				toolTipData: [{
						id: 1,
						icon: '/static/image/chat/longTipIcon/copy.png',
						title: '复制',
						disabled: false
					},
					{
						id: 2,
						icon: '/static/image/chat/longTipIcon/zhuanfa.png',
						title: '调换', //转发
						disabled: false
					},
					{
						id: 4,
						icon: '/static/image/chat/longTipIcon/revert.png',
						title: '多选',
						disabled: false
					},
					{
						id: 5,
						icon: '/static/image/chat/longTipIcon/tag.png',
						title: '编辑',
						disabled: false
					},
				],
				toolTipX: 0,
				toolTipY: 0,
				currentHandleMsg: {},
				customSendBtnStyle: { //发送按钮的自定义样式
					padding: '10rpx 20rpx',
				},
			};
		},
		created: function() {
			//计算页面高度布局
			this.windowHeight = this.$u.sys().windowHeight; //H5原始高度，H5键盘收起时会用到
			let scrollViewHeight = this.$u.sys().windowHeight * 0.831;
			this.scrollViewHeight = scrollViewHeight;
			this.scrollTop = scrollViewHeight - 5;
			//表情初始化
			let emjiList = faceUtil.splitEmojiList();
			//这里注释掉不需要的表情，如果放开出来前缀不一样会带来界面适配的问题，后续在处理
			/* for (let i = 0; i < this.bigEmojiList.length; i++) {
			  emjiList.push(this.bigEmojiList[i].list);
			} */
			this.faceList = emjiList;
			//console.log("faceList",this.faceList);
		},
		watch: {
			//监听H5键盘是否拉起的高度
			inputFocusFlag: function(inputFocus) {
				let that = this;
				// #ifdef H5
				console.log("输入框焦点变化", inputFocus);
				if (inputFocus == true) {
					that.showFunBtn = false;
					that.showEmojiBox = false;
					that.scrollViewHeight = that.$u.sys().windowHeight * 0.48;
					console.log("H5键盘打开", that.scrollViewHeight);
				} else {
					uni.hideKeyboard();
					if (!(that.showEmojiBox || that.showFunBtn)) {
						let scrollViewHeight = this.windowHeight * 0.831;
						that.scrollViewHeight = scrollViewHeight;
						console.log("H5键盘收起", that.scrollViewHeight);
					}
				}
				// #endif
			},
	
			scrollViewHeight(newVal, oldVal) {
				let that = this;
				//console.log("监听到列表高度变化，保证最后一条信息不被键盘或者抽屉弹窗挡住");
				if (that.messageList.length > 2) {
					that.scrollIntoView = "msg_" + that.messageList[that.messageList.length - 2].id;
					that.scrollAnimation = false;
					setTimeout(function() {
						that.scrollAnimation = true;
						that.scrollIntoView = "msg_" + that.messageList[that.messageList.length - 1].id;
					}, 500);
				}
			},
		},
		
		//监听信息滚动
		onReady() {
			let that = this;
			// 官方api【onKeyboardHeightChange】仅支持APP平台，H5不支持此监听
			// #ifdef APP-PLUS
			uni.onKeyboardHeightChange(res => {
				//console.log("监听到键盘高度变化",res);
				//如果键盘弹起
				if (res.height != 0) {
					that.showFunBtn = false;
					that.showEmojiBox = false;
					that.scrollViewHeight = (that.$u.sys().windowHeight - res.height) * 0.735;
					//console.log("键盘打开",that.scrollViewHeight);
				}
				//键盘收起
				else {
					if (!(that.showEmojiBox || that.showFunBtn)) {
						that.scrollViewHeight = that.$u.sys().windowHeight * 0.831;
						//console.log("键盘收起",that.scrollViewHeight);
					}
				}
			});
			// #endif
		},
		onLoad:function(option){
			let that=this;
			let param=option.yyyGroup;
			if(param!=null&&param!=undefined){
				that.yyyGroup=JSON.parse(decodeURIComponent(param)); 
				console.log("that.yyyGroup",that.yyyGroup);
			}
			that.createMessageList();
		},
		//监听返回
		onBackPress(options) {
			this.customBack();
			return true;
		},
		methods:{
			createMessageList:function(){
				let that=this;	
				let chatGroupId=that.yyyGroup.chatNumber;
				if(this.yyyGroup.chatNumber=="000000"){
					if(this.vuex_fileAssist.messageList.length>0){
						that.messageList=that.vuex_fileAssist.messageList;
					};
				}else{
					that.messageList=[
						{
							"id":"01",
							"chatGroupId":chatGroupId,
							"userId": that.yyyGroup.id,
							"meFlag": false,
							"userName":that.yyyGroup.nickName,
							"userAvatar": that.yyyGroup.avatar,
							'messageType': that.messageApi.MSG_TYPE.USER_MSG,
							"contentType": that.messageApi.CONTENT_TYPE.TEXT_CONTENT_TYPE,
							"content": {
								text:that.yyyGroup.userRemark
							},
							"formatTimeStr": that.yyyGroup.createTime,
							"showTimeFlag": true,
							"checked":false,
						},
						{
							"id":"02",
							"chatGroupId":chatGroupId,
							"userId": that.yyyGroup.chatNumber,
							"meFlag": false,
							"userName":that.yyyGroup.nickName,
							"userAvatar": that.yyyGroup.avatar,
							'messageType': this.messageApi.MSG_TYPE.SYSTEM_MSG,
							"contentType": that.messageApi.CONTENT_TYPE.TEXT_CONTENT_TYPE,
							"content": {
								text:'以上是打招呼的内容'
							},
							"formatTimeStr": that.yyyGroup.createTime,
							"showTimeFlag":false,
							"checked":false,
						},
						{
							"id":"03",
							"chatGroupId":chatGroupId,
							"userId": that.vuex_userInfo.id,
							"meFlag": true,
							"userName":"",
							"userAvatar": that.vuex_userInfo.avatar ? that.vuex_userInfo.avatar :
								"/static/image/default/default-user/default-user.png",
							'messageType': that.messageApi.MSG_TYPE.SYSTEM_MSG,
							"contentType": that.messageApi.CONTENT_TYPE.TEXT_CONTENT_TYPE,
							"content": {
								text:"你已添加了"+that.yyyGroup.nickName+"，现在可以开始聊天了"
							},
							"formatTimeStr": that.yyyGroup.sendTimeStr,
							"platFrom": this.messageApi.msgPlat,
							"showTimeFlag": true,
							"checked":false,
						},
					];
					if(that.yyyGroup.messageList&&that.yyyGroup.messageList.length>0){
						that.messageList=that.messageList.concat(that.yyyGroup.messageList);
					};
				}
				if(that.messageList.length>0){
					that.messageList.map(function(item){
						item.checked=false;
					});
					setTimeout(function(){
						that.scrollIntoView = "msg_" + that.messageList[that.messageList.length - 1].id;
					},500)
				}
			},
			
			customBack: function() {
				uni.hideKeyboard();
				this.hideDrawer();
				setTimeout(function(){
					uni.switchTab({
						url: "/pages/tabbar/group/group"
					})
				},200)
			},
			toGroupDetail:function(){
				let that=this;
				if(that.yyyGroup.chatNumber=="000000"){
					let obj={
						"lastMsgContent":"",
						"messageList":[],
						"lastMsgTime":"",
					};
					this.messageList=[];
					this.$u.vuex("vuex_fileAssist",obj);
				}
			},
			//输入框获取到焦点事件
			onInputFocus: function(event) {
				//console.log("输入框获取到焦点",event);
				this.inputFocusFlag = true;
			},
			//输入框失去焦点事件
			onBlur: function(event) {
				let that = this;
				let text = event.target.value;
				console.log("输入框失去焦点", text);
				that.inputFocusFlag = false;
			},
			//键盘确认发送
			confirmSendText: function(e) {
				let that = this;
				this.sendText();
			},
			//发送文字
			sendText: function() {
				let that = this;
				if (that.sendStr.length < 1) {
					uni.hideKeyboard();
					that.globalUtil.utilAlert("不能发送空字符串");
					return;
				} else {
					//如果文字中有表情,需要转换处理
					let formatStr = this.replaceEmoji(this.sendStr);
					let content = {
						"text": formatStr, //文本内容
					};
					that.sendMsg(this.messageApi.MSG_TYPE.USER_MSG,
						this.messageApi.CONTENT_TYPE.TEXT_CONTENT_TYPE,
						content);
				}
			},
			
			
			//控制表情弹窗
			changeEmojiBox: function() {
				let that = this;
				that.showFunBtn = false; //关闭功能盒子
				that.showEmojiBox = !that.showEmojiBox; //控制表情弹窗
				uni.hideKeyboard(); //隐藏键盘
				//这里要根据是否打开表情弹窗控制聊天列表盒子的高度
				if (that.showEmojiBox) {
					that.chatType = "voice";
					that.scrollViewHeight = that.$u.sys().windowHeight * 0.831 - 200;
				} else {
					that.scrollViewHeight = that.$u.sys().windowHeight * 0.831;
				}
			},
			//切换功能性按钮
			changeDrawer() {
				let that = this;
				that.showEmojiBox = false;
				that.showFunBtn = !that.showFunBtn;
				uni.hideKeyboard();
				if (that.showFunBtn) {
					that.scrollViewHeight = that.$u.sys().windowHeight * 0.831 - 200;
				} else {
					that.scrollViewHeight = that.$u.sys().windowHeight * 0.831;
				}
			},
			//功能弹窗点击事件
			funGirdItemClick: function(index) {
				let that = this;
				if (!that.vuex_WSObj) {
					that.globalUtil.utilAlert("网路故障，服务不可达");
					return;
				}
				let id = that.funList[index].id;
				that.inputFocusFlag = false;
				switch (id) {
					case 1:
						that.chooseImage(that.messageApi.CONTENT_TYPE.IMG_CONTENT_TYPE); //选择照片
						break;
					case 2:
						//that.chooseVideo(that.messageApi.CONTENT_TYPE.VIDEO_CONTENT_TYPE); //选择视频
						break;
					case 3:
						//that.toSendRedBag(); //发送红包
						break;
					case 4:
						//that.toTransfer(); //转账
						break;	
					default:
						break;
				}
			},
			chooseImage(contentType) {
				let that = this;
				uni.chooseImage({
					count: 9,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							uni.getImageInfo({
								src: res.tempFilePaths[i],
								success: (image) => {
									image.tempFilePath = image.path;
									let maxW = uni.upx2px(350); //350是定义消息图片最大宽度
									let maxH = uni.upx2px(350); //350是定义消息图片最大高度
									if (image.width > maxW || image.height > maxH) {
										let scale = image.width / image.height;
										image.width = scale > 1 ? maxW : maxH * scale;
										image.height = scale > 1 ? maxW / scale : maxH;
									}
									delete image.errMsg;
									delete image.path;
									setTimeout(function() {
										that.uploadFile(image, contentType);
									}, 1500);
									return;
								}
							});
						}
					},
					fail() {
						console.log("选择图片上传发送异常");
					}
				});
			},
			
			toYYYPerson:function(item){
				let that=this;
				that.$u.route({
					url:'/pages/tabbar/find/yaoyiyao/yaoyiyao-friend-home',
					params:{
						personInfo:encodeURIComponent(JSON.stringify(that.yyyGroup))
					},
					//animationType:'slide-in-left'
				})
			},
			
			//上传文件 contentType 2图片 3视频 4语音 5文件
			uploadFile: function(tempFileInfo, contentType) {
				let that = this;
				//console.log("上传文件本地信息",tempFileInfo);
				if (tempFileInfo.errMsg) {
					delete tempFileInfo.errMsg;
				};
				let target = that.$u.api.multipartAddress.target;
				const uploadTask = uni.uploadFile({
					url: that.$u.api.multipartAddress.updload,
					filePath: tempFileInfo.tempFilePath,
					name: 'fileName',
					header: {
						'Access-Control-Allow-Origin': '*',
						'TOKEN_IM': that.vuex_token,
					},
					success: (uploadFileRes) => {
						if (uploadFileRes.statusCode == 200 && uploadFileRes.data.length > 0) {
							let resObj = JSON.parse(uploadFileRes.data);
							if (resObj.code == 200) {
								let fileInfo = resObj.data;
								let fileMsgObj = Object.assign(tempFileInfo, fileInfo);
								fileMsgObj.fileSaveTarget = target;
								console.log("发送文件信息参数", fileMsgObj);
								that.sendMsg(this.messageApi.MSG_TYPE.USER_MSG, contentType, fileMsgObj);
							} else {
								console.log("文件上传失败");
							}
						} else {
							console.log("文件上传失败");
						}
					},
					fail: function() {
						console.log("文件上传失败");
					},
					complete: function() {
						uni.hideLoading();
					}
				});
			},
			//发送信息
			//msgType ：2用户信息 1系统信息
			//contentObj：信息内容 json对象
			//contentType：内容类型 1文本
			sendMsg: function(msgType, contentType, contentObj) {
				let that = this;
				let timestamp = new Date().getTime();
				let message = {
					"id": new Date().getTime() + "",
					"chatGroupId": timestamp,
					"userId": that.vuex_userInfo.id,
					"meFlag": true,
					"userName": that.vuex_userInfo.userName,
					"userAvatar": that.vuex_userInfo.avatar ? that.vuex_userInfo.avatar :
						"/static/image/default/default-user/default-user.png",
					'messageType': msgType,
					"contentType": contentType,
					"content": contentObj,
					"createTime": that.globalUtil.getTimeStr(timestamp),
					"formatTimeStr":that.globalUtil.getTimeStr(timestamp,'M'),
					"timestamp": timestamp,
					"platFrom": this.messageApi.msgPlat,
					"showTimeFlag":false,
					"linkName":"",
					"checked":false,
				};
				console.log("发送信息", message);
				this.messageList.push(message);
				that.sendStr="";
				//这里要设置一下最后发送的信息内容
				this.setLastMsgContent(message);
				setTimeout(function(){
					that.scrollIntoView = "msg_" + message.id;
				},500);
			},
			//设置最后一条信息发送内容
			setLastMsgContent:function(message){
				let that=this;
				let formatContent="";
				let contentType=message.contentType;
				let contentObj=message.content;
				switch (contentType+""){
					case "1":
						formatContent=contentObj.text;
						formatContent=formatContent.replace(/\n/g,",");
						formatContent=formatContent.replace(/face\[([^\s\[\]]+?)]/g, function(face) {
							return face.replace(/^face/g, '')
						});
						break;
					case "2":
						formatContent="[图片]";
						break;
					case "3":
						formatContent="[视频]";
						break;
					case "4":
						formatContent="[语音]";
						break;
					case "7":
						formatContent="[红包]";
						break;	
					case "10":
						formatContent="[聊天记录]";
						break;
					case "11":
						formatContent="[图文]";
						break;
					case "12":
						formatContent="[视频文字]";
						break;
					default:
						formatContent="[其他]";
						break;
				};
				console.log("最后一条信息",formatContent);
				console.log("群号",this.yyyGroup.chatNumber);
				if(this.yyyGroup.chatNumber=="000000"){
					let obj={
						"lastMsgContent":formatContent,
						"messageList":that.messageList,
						"lastMsgTime":message.formatTimeStr,
					};
					this.$u.vuex("vuex_fileAssist",obj);
					return;
				}else{
					let yyy_groupList=JSON.parse(JSON.stringify(this.vuex_yyyFriendList));
					yyy_groupList.map(function(item){
						if(item.chatNumber==that.yyyGroup.chatNumber){
							item.lastMsgContent=formatContent;
							item.sendTimeStr=message.createTime;
							item.messageList.push(message);
							console.log("动态加载最后一条信息",item.chatNumber);
						}
					});
					this.$u.vuex("vuex_yyyFriendList",yyy_groupList);
					return;
				}
			},
			
			//删除表情和文字
			delSendStr: function() {
				//console.log("删除表情",this.sendStr);
				let emojiStr = this.sendStr;
				let emojiArr = [];
				emojiStr = emojiStr.replace(/\[([^(\]|\[)]*)\]/g, function(item, index) {
					emojiArr.unshift(item);
				});
				if (emojiArr.length > 0) {
					if (this.sendStr.endsWith(emojiArr[0])) {
						this.sendStr = this.sendStr.replace(emojiArr[0], "");
					} else {
						this.sendStr = this.sendStr.slice(0, this.sendStr.length - 1);
					}
				} else {
					this.sendStr = this.sendStr.slice(0, this.sendStr.length - 1);
				}
			},
			//清除文本
			clearSendStr: function() {
				console.log("长按删除")
				this.sendStr = "";
			},
			
			
			hideDrawer: function() {
				let that = this;
				if (this.showFunBtn == true) {
					uni.hideKeyboard();
					this.showFunBtn = false;
					that.scrollViewHeight = that.$u.sys().windowHeight * 0.831;
				}
				if (this.showEmojiBox == true) {
					uni.hideKeyboard();
					this.showEmojiBox = false;
					that.scrollViewHeight = that.$u.sys().windowHeight * 0.831;
				}
			},
			//操作项
			showToolTip: function(e, index) {
				let that = this;
				that.toolTipX = e.touches[0].clientX;
				that.toolTipY = e.touches[0].clientY;
				that.toolTipFlag = !that.toolTipFlag;
				that.currentHandleMsg = that.messageList[index];
				that.currentHandleMsg.msgIndex = index;
			},
			tapPopup(e) {
				let that = this;
				console.log("点击菜单",e);
				if (e.title == "撤回") {
					//that.revertMsg();
				}
				if (e.title == "复制") {
					let content = that.currentHandleMsg.content;
					if (content) {
						let copyContent =content.text;
						console.log("复制的内容", copyContent);
						let formatStr = this.replaceReseverEmoji(copyContent);
						console.log("复制转义后的内容", formatStr);
						that.globalUtil.uniCopy({
							content: formatStr,
							success: (res) => {
								uni.showToast({
									title: res,
									icon: 'none'
								})
							},
							error: (e) => {
								uni.showToast({
									title: e,
									icon: 'none',
									duration: 3000,
								})
							}
						})
					}
					that.toolTipFlag = false;
					return;
				}
				if (e.title == "转发") {
					that.toolTipFlag = false;
					that.$u.route({
						url: '/pages/chat/chatGroup/msgForward',
						params: {
							msgList:encodeURIComponent(JSON.stringify([that.currentHandleMsg])),
							sendType: 1, //1 单条转发 2多条转发
						}
					})
					return
				}
				if(e.title=="调换"){
					that.toolTipFlag = false;
				}
				if (e.title == "多选") {
					that.toolTipFlag = false;
					that.$u.route({
						url: '/pages/chat/chatting/chatting-checkbox',
					})
					return
				}
				if(e.title=="编辑"){
					that.toolTipFlag = false;
					return
				}
			},
			
			checkChange:function(msg){
				let isExist = this.checkedMessages.some(item=>item.id===msg.id);
				if(!isExist){
					this.checkedMessages.push(msg);
				}else{
					this.checkedMessages =  this.checkedMessages.filter(function(item) {
						return  item.id!=msg.id;
					});
				}
				console.log("this.checkedMessages",this.checkedMessages);	
			},
			
			handleMessageMenu:function(menuItem,messageItem){
				let that=this;
				console.log("messageItem",messageItem);
				let title= menuItem.title;
				switch (title){
					case '复制':
						let copyContent =messageItem.content.text;
						console.log("复制的内容", copyContent);
						let formatStr = this.replaceReseverEmoji(copyContent);
						console.log("复制转义后的内容", formatStr);
						that.globalUtil.uniCopy({
							content: formatStr,
							success: (res) => {
								console.log("复制成功");
							},
							error: (e) => {
								uni.showToast({
									title: e,
									icon: 'none',
									duration: 3000,
								})
							}
						})
						break;
					case '转发':
						
						break;
					case '多选':
						that.checkBoxFlag=true;
						break;			
					default:
						break;
				}
			},
			showZhuanFaPop:function(){
				let that=this;
				that.zhuanFaPopFlag=true;
			},
			confirmToZhuanFa:function(index){
				this.zhuanFaPopFlag=false;
				this.checkBoxFlag=false;
				let num=this.checkedMessages.length;
				//这里就提前处理一下信息记录到转发的
				console.log("选择要转发的信息记录",num);
				let param=null;
				if(num>0){
					param=encodeURIComponent(JSON.stringify(this.checkedMessages));
				};
				this.checkedMessages=[];
				this.messageList.map(function(item){
					item.checked=false;
				});
				this.$u.route({
					url:'/pages/tabbar/find/yaoyiyao/yaoyiyao-chatting/yaoyiyao-zhuanfa-pop',
					params:{
						checkedMessages:param
					}
				})
			},
			replaceReseverEmoji: function(str) {
				let replacedStr = str.replace(/face\[([^\s\[\]]+?)]/g, function(face) {
					let alt = face.replace(/^face/g, '');
					return alt;
				})
				console.log("replacedStr", replacedStr);
				return replacedStr;
			},
			//表情替换
			replaceEmoji(str) {
				let that = this;
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					for (let i = 0; i < this.faceList.length; i++) {
						let row = this.faceList[i];
						for (let j = 0; j < row.length; j++) {
							let EM = row[j];
							if (EM == item) {
								//console.log("EM: " + EM);
								let imgstr = "face" + EM;
								return imgstr;
							}
						}
					}
				});
				//console.log("replacedStr", replacedStr);
				return replacedStr;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.custom-navbar {
		width: 100%;
		display: flex;
		flex: 1;
		flex-direction: row;
		justify-content: space-between;
		align-content: center;
		align-items: center;
		padding: 0 30rpx;

		.nav-left {}

		.nav-center {
			font-size: 36rpx;
			font-weight: bold;
		}

		.nav-right {}
	}

	.msg-container {

		//width: 100%;
		.msg-box-scroller {
			::-webkit-scrollbar {
				display: none;
				height: 0;
				width: 0;
			}
			background-color: #f0f0f0;
		}
	}

	.footer-container {
		&-showfn {
			padding-bottom: 0rpx;
			padding-bottom: calc(420rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(420rpx + env(safe-area-inset-bottom));
		}

		&-box {
			height: auto;
			min-height: calc(100vh - env(safe-area-inset-top) - 200rpx);
			box-sizing: content-box;
			position: relative;
			padding-bottom: 120rpx;
		}

		.input-box {
			position: fixed;
			bottom: 20;
			left: 0;
			width: 100%;
			box-sizing: content-box;
			z-index: 999;
			background-color: #f9f9f9 !important;

			&-flex {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;
				padding: 20rpx;
				box-sizing: border-box;

				image {
					width: 60rpx;
					height: 60rpx;
				}

				.icon_img {
					margin-right: 20rpx;
				}

				.icon_btn_add {
					margin-left: 20rpx;
				}

				&-grow {
					flex-grow: 1;

					.content {
						box-sizing: border-box;
						background-color: #fff;
						height: 80rpx;
						padding: 0 20rpx;
						border-radius: 12rpx;
						font-size: 30rpx;
						caret-color: $uni-color-success;
					}

					.textArea-box {
						width: 100%;
						background-color: #FFFFFF;
						border-radius: 10upx;
						//padding-left: 30upx;
						min-height: 70upx;
						display: flex;
						align-items: center;

						textarea {
							width: 100%;
						}
					}

					.inputScroll {
						max-height: 180upx;
					}

					/* 语音标题 */
					.voice_title {
						text-align: center;
						background-color: #ffffff;
						height: 80rpx;
						line-height: 80rpx;
						border-radius: 12rpx;
						font-weight: bold;
						font-size: 32rpx;
					}

				}

				.btn {
					margin-left: 20rpx;
					background-color: $u-type-success;
					border: none;
				}
			}

			.fun-box {
				opacity: 0;
				transition: all 0.1s ease-in-out;
				height: 0;

				.grid-text {
					padding-top: 10rpx;
					color: $uni-text-color-grey;
					font-size: 30rpx;
				}

			}

			.show-fun-box {
				opacity: 1;
				height: 400rpx;

				.emoji-swiper {
					height: 400rpx;

					swiper-item {
						display: flex;
						align-content: flex-start;
						flex-wrap: wrap;

						view {
							width: 12%;
							height: 16vw;
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 8.4vw;
								height: 8.4vw;
							}
						}
					}
				}
			}
		}

		/* 语音动画 */
		.voice_an {
			width: 300rpx;
			height: 300rpx;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -55%);
			background-color: rgba(41, 41, 41, 0.7);
			color: white;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			border-radius: 10rpx;

			.text {
				padding-top: 30rpx;
			}

			@keyframes runVoice {
				0% {
					height: 10%;
				}

				20% {
					height: 50%;
				}

				50% {
					height: 100%;
				}

				80% {
					height: 50%;
				}

				100% {
					height: 0%;
				}
			}

			.wave {
				width: 6rpx;
				height: 100%;
				margin-left: 10rpx;
				border-radius: 50rpx;
				background-color: #999;
				vertical-align: middle;
				display: inline-block;
			}

			.voice_an_icon {
				width: 200rpx;
				height: 100rpx;
				line-height: 50rpx;
				margin: 50rpx 0;
			}

			.voice_an_icon #one {
				animation: runVoice 0.6s infinite 0.1s;
			}

			.voice_an_icon #two {
				animation: runVoice 0.6s infinite 0.3s;
			}

			.voice_an_icon #three {
				animation: runVoice 0.6s infinite 0.6s;
			}

			.voice_an_icon #four {
				animation: runVoice 0.6s infinite 0.1s;
			}

			.voice_an_icon #five {
				animation: runVoice 0.6s infinite 0.3s;
			}

			.voice_an_icon #six {
				animation: runVoice 0.6s infinite 0.6s;
			}

			.voice_an_icon #seven {
				animation: runVoice 0.6s infinite 0.1s;
			}
		}
	}
</style>
<style>
	page {
		background-color: #F8F8F8;
	}
</style>
